<template>
  <div class="x-bar">
    <div :id="id" :option="option"></div>
  </div>
</template>
<script>
  import HighCharts from 'highcharts'
  export default {
    name: 'Chart',
    // 验证类型
    props: {
      id: {
        type: String
      },
      option: {
        type: Object
      }
    },
    methods: {
      chart() {
        HighCharts.chart(this.id, this.option);
      }
    },
    watch: {
      option () {
        this.chart();
      }
    },
    mounted() {
      this.chart();
    }
  }
</script>

<style>
  .highcharts-container  {
    display: block;
    margin: 0 auto;
  }
</style>
